<template>
  <div class="operationPageWrap">
    <div class="pageTableInner">
      <div class="infoSearchWrap">
        <div class="infoSearchOne">
          <el-row :gutter="10">
            <el-col :span="5">
              <div class="searchWrap">
                <span class="searchFont">案件类型:</span>
                <span class="searchInputFont">
                 <el-select v-model="searchInfo.reportType" @change="searchRowsInfo()" size="mini" clearable placeholder="预警类型">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
                </span>
              </div>
            </el-col>
            <el-col :span="5">
              <div class="searchWrap">
                <span class="searchFont">行政区域:</span>
                <span class="searchInputFont" >
                  <el-select v-model="searchInfo.districtId" :disabled="$store.state.userInfo.regionId?true:false" @change="searchRowsInfo()" size="mini" clearable placeholder="行政区">
                    <el-option
                      v-for="item in $store.state.districtData"
                      :key="item.id"
                      :label="item.regionName"
                      :value="item.id">
                    </el-option>
                  </el-select>
                </span>
              </div>
            </el-col>
            <el-col :span="5">
              <div class="searchWrap">
                <span class="searchFont">立案编号:</span>
                <span class="searchInputFont">
                    <el-input style="width: 100%;" clearable size="mini" v-model="searchInfo.reportNo"
                              @change="searchRowsInfo" auto-complete="off" placeholder="立案编号"></el-input>
                </span>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="searchWrap">
                <span class="searchFont">立案时间:</span>
                <span class="searchInputFont">
                 <el-date-picker
                   style="width: 100%;"
                   v-model="value6"
                   type="daterange"
                   align="left"
                   @change="searchRowsInfo()"
                   placeholder="选择日期范围"
                   size="mini"
                   :picker-options="$store.state.pickerOptions2">
                  </el-date-picker>
                </span>
              </div>
            </el-col>
          </el-row>
        </div>
        <div class="infoSearchOne">
          <el-row :gutter="10">
            <el-col :span="5">
              <div class="searchWrap">
                <span class="searchFont">处置状态:</span>
                <span class="searchInputFont">
                 <el-select v-model="searchInfo.reportStatus" @change="searchRowsInfo()" size="mini" clearable placeholder="处置状态">
                      <el-option
                        v-for="item in options1"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select>
                </span>
              </div>
            </el-col>
            <el-col :span="5">
              <div class="searchWrap">
                <span class="searchFont">责任企业:</span>
                <span class="searchInputFont">
                    <el-select v-model="searchInfo.enterpriseNo" size="mini" @change="searchRowsInfo" clearable placeholder="全部">
                      <el-option
                        v-for="item in this.$store.state.companyInfos"
                        :key="item.enterpriseNo+''"
                        :label="item.enterpriseName"
                        :value="item.enterpriseNo+''">
                      </el-option>
                    </el-select>
                </span>
              </div>

            </el-col>
            <el-col :span="5">
              <div class="searchWrap">
                <span class="searchFont">紧急程度:</span>
                <span class="searchInputFont">
                   <el-select v-model="searchInfo.orderType" @change="searchRowsInfo()" size="mini" clearable placeholder="紧急程度">
                      <el-option
                        v-for="item in options2"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select>
                </span>
              </div>
            </el-col>
            <div style="float: right;margin-right: 10px;">
              <el-button type="primary" size="mini" @click="searchRowsInfo()">查询</el-button>
            </div>
          </el-row>
        </div>
      </div>
      <div class="tableContainer" style="top:120px;">
        <div class="tableInner">
          <el-table
            ref="multipleTable"
            :data="rows"
            stripe
            :height="tableHeight"
            tooltip-effect="dark"
            style="width: 100%"
          >
            <el-table-column

              label="立案编号"
              prop="reportNo"
              width="160"
              show-overflow-tooltip>
            </el-table-column>
            <el-table-column
              label="立案类型"
              prop="reportType"
            >
              <template slot-scope="scope">
                {{scope.row.reportType == 1 ? '乱停乱放' : scope.row.reportType == 2 ? '损坏车辆' : scope.row.reportType == 3 ? '其它' :scope.row.reportType == 4 ? '违规投放' :scope.row.reportType == 5 ? '区域超量' : ""}}

              </template>
            </el-table-column>
            <el-table-column
              label="责任企业"
              prop="enterpriseName"
              show-overflow-tooltip>
            </el-table-column>
            <el-table-column
              label="区域"
              prop="districtName"
              show-overflow-tooltip>
            </el-table-column>
            <el-table-column
              label="处置状态"
              prop="reportStatus"
              show-overflow-tooltip>
              <template slot-scope="scope">
                {{scope.row.reportStatus == 0 ? '未处理' : scope.row.reportStatus == 1 ? '已退回' :
                scope.row.reportStatus == 2 ? '已处理' :scope.row.reportStatus == 3 ? '已结案' : ""}}

              </template>
            </el-table-column>
            <el-table-column
              label="紧急程度"
              prop="orderType"
              show-overflow-tooltip>
              <template slot-scope="scope">
                {{scope.row.orderType == 1 ? '普通订单' : scope.row.orderType == 2 ? '紧急订单' : ""}}

              </template>
            </el-table-column>
            <el-table-column
              label="立案时间"
              prop="createTime"
              width="140px"
              show-overflow-tooltip>
            </el-table-column>
            <el-table-column
              label="是否超时"
              prop="hasOvertime"
              show-overflow-tooltip>
              <template slot-scope="scope">
                {{scope.row.hasOvertime == 0? '未超时' : scope.row.hasOvertime == 1 ? '已超时' : ""}}

              </template>
            </el-table-column>
            <el-table-column v-if="$store.state.btnMenuIds.indexOf(149)>-1"  label="操作">
              <template slot-scope="scope">
                <router-link :to="'/smartCase/smartCaseDetail/'+scope.row.detailId">
                  <i  class="iconfont icon-chakan" ></i>
                </router-link>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="paginationWrap">
          <el-row :gutter="10">
            <el-col :span="13" :offset="9">
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="searchInfo.page"
                :page-sizes="[10, 30, 50, 100,200]"
                :page-size="searchInfo.rows"
                layout="total, sizes, prev, pager, next, jumper"
                :total="count">
              </el-pagination>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
    <el-dialog
      title="照片预览"
      @opened="$store.commit('dialogTop')"
      :visible.sync="dialogVisible"
      size="tiny"
      class="width500"
    >
      <div style="text-align: center;font-size: 16px;margin-bottom: 8px;">{{textImg}}</div>
      <el-carousel style="width: 100%;height: 100%;" indicator-position="outside" :autoplay="false" height="500px" ref="carousel" @change="changeFunImg">
        <el-carousel-item style="width: 100%;"  v-for="(item,index) in allImgs" :key="index"  >
          <img style="width: 100%;height: 100%;" :src="item.photoUrl" alt="">
        </el-carousel-item>
      </el-carousel>
      <!--<div style="text-align:center;margin-top: 10px">
        <el-button @click="dialogVisible = false">关闭</el-button>
      </div>-->

    </el-dialog>
    <router-view @prviewImg="prviewImg" @searchRowsInfo="searchRowsInfo"></router-view>
  </div>
</template>

<script>
  export default {
    props: [],
    data(){
      return {
        options1: [
          {
            value: '0',
            label: '未处理'
          }, {
            value: '1',
            label: '已退回'
          }, {
            value: '2',
            label: '已处理'
          }, {
            value: '3',
            label: '已结案'
          }],
        options2: [
          {
            value: '1',
            label: '普通订单'
          }, {
            value: '2',
            label: '紧急订单'
          }],
        options: [
          {
            value: '',
            label: '全部'
          },
          {
            value: '1',
            label: '乱停乱放'
          }, {
            value: '4',
            label: '违规投放'
          }, {
            value: '5',
            label: '区域超量'
          }],
        streetData: [],
        tableHeight: 400,
        checkInfo: {},
        textImg:"处理前",
        dialogVisible: false,
        allImgs:[],
        value6:[],
        rows: [],
        count: 0,
        searchInfo: {
          "hasIntelligence": 1,
          "reportType":"",
          "districtId":this.$store.state.userInfo.regionId,
          "orderType":"",
          "enterpriseNo":"",
          "reportStatus":"",
          "reportNo":"",
          beginTime: '',
          endTime: '',
          page: 1,
          rows: 10,
        },
      }
    },
    components: {},
    created(){
      this.searchRowsInfo()
    },
    mounted(){
      this.$nextTick(() => {
        //表格高度
        this.tableHeight = document.querySelector(".operationPageWrap").clientHeight - 200
      })
    },

    methods: {
      changeFunImg(val){
        this.textImg=this.allImgs[val].photoType==1?"举报照片":this.allImgs[val].photoType==2?"处理前照片":this.allImgs[val].photoType==3?"处理后照片":""
      },
      prviewImg({url,allImgs}){
        this.allImgs=allImgs
        this.dialogVisible = true
        allImgs.forEach((item,key)=>{
          if(item.photoUrl==url){
            setTimeout(()=>{
              this.$refs.carousel.setActiveItem(key)
            },0)
          }
        })

      },

      //获取所有信息
      searchRowsInfo(val){
        val?"":this.searchInfo.page = 1;
        if (this.value6&&this.value6[0] != null) {
          this.searchInfo.beginTime = this.dtime(this.value6[0]).format('YYYY-MM-DD 00:00:00')
          this.searchInfo.endTime = this.dtime(this.value6[1]).format('YYYY-MM-DD 23:59:59')
        } else {
          this.searchInfo.beginTime = ""
          this.searchInfo.endTime = ""
        }
        this.axios.post(process.env.API_HOST + `/vehicle/selectCaseGrid`, this.searchInfo)
          .then(response => {
            const result = response.data
            if (result.code == 200) {
              this.rows = result.rows
              this.count = result.total;
            }
          })
      },
      handleSizeChange(val) {
        this.searchInfo.rows = val
        this.searchRowsInfo()
      },
      handleCurrentChange(val) {
        this.searchInfo.page = val;
        this.searchRowsInfo(val)

      },
    },
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  @import "../../../common/stylus/mixin.styl"
  .operationPageWrap
    page()
    .width500 .el-dialog
      min-width 400px
</style>
